<template>
  <!-- 电影详情 -->
  <div
    class="details"
    :style="`backgroundColor:${movie.backgroundColor}`"
    v-if="movie"
  >
    <!-- 面包屑 -->
    <div class="crumbs">
      <router-link tag="span" to="/">御寒影院</router-link>
      &nbsp;>&nbsp;<span>{{ movie.nm }}</span
      >{{ showbtn }}
    </div>
    <!-- 头部信息 -->
    <div class="top-message">
      <div class="left">
        <!-- <h3>{{ movie.img }}</h3> -->
        <img :src="movie.img" />
      </div>
      <div class="right">
        <h1>{{ movie.nm }}</h1>
        <p>{{ movie.enm }}</p>
        <p>{{ movie.cat }}</p>
        <p>{{ movie.star }}</p>
        <p>{{ movie.pubDesc }} / {{ movie.dur }}分钟</p>
        <div>
          <button class="want-see">
            <van-icon name="like" /> <span> 想看</span>
          </button>
          <button class="see-out">
            <van-icon name="star" /> <span> 看过</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 评分 -->
    <div class="score">
      <!-- 第一行 -->
      <div class="score-top">
        <img
          src="//s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo-new.png"
          alt=""
        />
        <p>
          {{ movie.scoreLabel }}
        </p>
        <div>{{ movie.wish }}人想看</div>
        &nbsp; &nbsp; &nbsp;
        <div>{{ movie.watched }}人看过</div>
        <van-icon name="arrow" />
      </div>
      <!-- 多少分 -->
      <div class="score-bot">
        <div class="left">
          <p>{{ movie.sc }}</p>
          <div>{{ movie.snum }} <span> 人评</span></div>
        </div>
        <!-- 数据结构图 -->
        <div class="con">
          <!-- 每条 -->
          <div
            class="list"
            v-for="(star, index) in stars"
            :key="index + star.long"
          >
            <!-- 星星 -->
            <div class="star">
              <img
                :src="url"
                v-for="(url, index) in star.star"
                :key="url + index"
              />
            </div>
            <!-- 条子 -->
            <div class="strip">
              <div class="percent" :style="`width:${star.long}`"></div>
            </div>
          </div>
        </div>
        <!-- 中国大陆票房榜 reputation -->
        <!-- <div class="right"></div> -->
      </div>
    </div>

    <!-- 简介 -->
    <div class="intro">
      <h2>
        简介
        <span @click="showBrief = !showBrief">
          {{ showBrief ? "收起" : "展开" }}
          <van-icon :name="showBrief ? 'arrow-up' : 'arrow-down'"
        /></span>
      </h2>
      <p :class="showBrief ? '' : 'showBrief'">{{ movie.dra }}</p>
    </div>

    <!-- 职演人员 celebrities -->
    <div class="actors">
      <h2>
        职演人员<span>全部<van-icon name="arrow" /></span>
      </h2>
      <ul class="list">
        <li v-for="actors in actorslist" :key="actors.id">
          <img :src="actors.avatar" />
          <p class="cnm">{{ actors.cnm }}</p>
          <p class="desc">{{ actors.desc }}</p>
        </li>
      </ul>
    </div>

    <!-- 视频推荐  -->
    <div class="video-recommended">
      <h2>
        视频推荐<span>全部<van-icon name="arrow" /></span>
      </h2>
      <ol>
        <li v-for="img in feeds" :key="img">
          <van-icon class="play-circle" name="play-circle" />
          <van-icon class="play" name="play" />
          <img :src="img" />
        </li>
      </ol>
    </div>

    <!-- 剧照 -->
    <div class="photos">
      <h2>
        剧照 <span>全部3张<van-icon name="arrow" /></span>
      </h2>
      <ol>
        <li v-for="item in photos" :key="item">
          <img :src="item" width="140" height="93" />
        </li>
      </ol>
    </div>

    <!-- 跳转到购票 -->
    <!-- <div class="go-buy">
      <div class="icon-box">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
      <div class="btn" @click="gocinema">特惠购票</div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: null,
      actorslist: [], // 演职人员
      feeds: [], //视频推荐
      photos: [], //剧照
      showbtn: "", // 是否预售
      showBrief: false, // 简介
      // 星星数据
      stars: [
        {
          long: "87%",
          star: [
            // 星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
          ],
        },
        {
          long: "5%",
          star: [
            // 暗星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            // 星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
          ],
        },
        {
          long: "2%",
          star: [
            // 暗星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            // 星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
          ],
        },
        {
          long: "3%",
          star: [
            // 暗星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            // 星星

            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
          ],
        },
        {
          long: "3%",
          star: [
            // 暗星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png",
            // 星星
            "https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png",
          ],
        },
      ],
    };
  },
  props: {
    // 通过动态路由传入id
    movieid: {
      type: String,
      default: "0",
    },
  },
  methods: {
    // // 跳转到影院
    // gocinema() {
    // },
  },
  created() {
    this.axios.get(`movie/detail?movieId=${this.movieid}`).then((re) => {
      this.movie = re.movie;
      console.log(re);
      // 视频推荐
      re.feedVideos.feeds.forEach((ele) => {
        this.feeds.push(ele.images[0].url);
      });

      // 图片格式，用map替换。
      this.actorslist = re.celebrities.map((item) => {
        item.avatar = item.avatar.replace("w.h", "80.112");
        return item;
      });

      // 剧照
      re.movie.photos.map((item) => {
        if (item.indexOf("w.h") !== -1) {
          let item2 = item.replace("w.h", "140.93");
          this.photos.push(item2);
        } else {
          this.photos.push(item);
        }
      });
    });

    // 热映列表
    // this.axios.get("index/movieOnInfoList").then((re) => {
    //   // console.log("热映列表", re);

    //   // console.log(re);
    // });
  },
};
</script>

<style lang="scss" scoped>
.details {
  padding: 20px 15px 100px;
  font-size: 14px;
  color: #ccc;
  h2 {
    position: relative;
    margin-bottom: 10px;
    color: #fff;
    span {
      position: absolute;
      right: 6px;
      bottom: 1.5px;
      font-size: 12px;
      opacity: 0.6;
    }
  }
  // 面包屑
  .crumbs {
  }
  // 头部信息
  .top-message {
    margin-top: 20px;
    display: flex;
    .left {
      img {
        width: 100px;
        height: 138px;
      }
    }
    .right {
      padding-top: 4px;
      margin-left: 12px;
      h1 {
        font-weight: bold;
        font-size: 20px;
        color: #fff;
        margin-bottom: 16px;
      }
      p {
        font-size: 12px;
        height: 18px;
        line-height: 16px;
      }
      button {
        border: none;
        background: none;

        background: rgba(255, 255, 255, 0.349);
        box-shadow: 0 0.02rem 0.08rem 0 rgb(0 0 0 / 10%);
        border-radius: 5px;
        font-size: 14px;
        width: 110px;
        height: 30px;
        color: #fff;

        &.want-see {
          margin-right: 10px;
        }
      }
    }
  }

  // 评分
  .score {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    margin-top: 20px;
    height: 100px;
    // 第一行
    .score-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      font-size: 12px;
      padding: 9px 10px 0;
      img {
        width: 16px;
      }
    }

    //  多少分
    .score-bot {
      margin-top: 15px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .left {
        width: 60px;
        height: 35px;
        text-align: right;

        p {
          line-height: 26px;
          font-size: 26px;
          font-weight: bold;
          color: #ffb400;
          margin-bottom: 4px;
        }
        div {
          line-height: 10px;
          font-size: 20px;

          zoom: 0.5;
          opacity: 0.6;
        }
      }
      .con {
        .list {
          margin-top: -7px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 15px;

          // 星星
          .star {
            height: 18px;

            img {
              width: 5px;
            }
          }
          // 条子
          .strip {
            margin-left: 5px;
            width: 72px;
            height: 4px;
            background: rgba(255, 255, 255, 0.06);
            .percent {
              background: rgba(255, 255, 255, 0.3);
              height: 4px;
            }
          }
        }
      }
      .right {
      }
    }
  }
  // 简介
  .intro {
    font-size: 15px;
    color: #fff;
    margin-top: 20px;

    p {
      line-height: 26px;

      &.showBrief {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  //职演人员
  .actors {
    margin: 30px 0 25px;
    .list {
      width: 100%;
      margin-top: 14px;

      display: flex;
      overflow-x: auto;
      li {
        margin-right: 10px;
        img {
          width: 80px;
          height: 110px;
        }
        p {
          font-size: 12px;

          width: 80px;
          text-align: center;

          overflow: hidden; /*隐藏*/
          white-space: nowrap; /*不换行*/
          text-overflow: ellipsis; /* 超出部分省略号 */
          &.acimgs {
            width: 80px;
            height: 112px;
            background-color: #fff;
            margin-right: 10px;
          }
          &.cnm {
            color: #fff;
          }
          &.desc {
            margin-top: 5px;
            opacity: 0.4;
          }
        }
      }
    }
  }

  // 视频推荐
  .video-recommended {
    ol {
      display: flex;
      overflow-x: auto;
      padding-left: 10px;
      padding-top: 5px;
      li {
        margin-right: 10px;
        position: relative;
        .play-circle {
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -16px 0 0 -16px;
          font-size: 32px;
        }
        .play {
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -10px 0 0 -10px;

          color: #222;
          font-size: 20px;
        }
        img {
          width: 140px;
          height: 93px;
          border-radius: 10px;
        }
      }
    }
  }

  // 剧照
  .photos {
    margin-top: 20px;
    ol {
      display: flex;

      justify-content: flex-start;
      align-items: flex-start;
      overflow-x: scroll;

      li {
        padding-top: 5px;
        margin-right: 8px;
      }
    }
  }

  // 跳转购票
  .go-buy {
    width: 100%;
    height: 60px;
    background: #fff;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;

    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon-box {
      font-size: 25px;
      width: 70px;
      text-align: center;
    }
    .btn {
      flex: 1;
      height: 30px;
      line-height: 30px;

      background-image: linear-gradient(-90deg, #3c9fe6, #5dade7);

      border-radius: 30px;
      font-size: 15px;
      color: #fff;
      text-align: center;
      margin: 0 5px;
    }
  }
}
</style>